<!doctype html>
<html>
 <head> 
  <meta charset="utf-8"> 
  <title>Tab选项卡右键弹出菜单组件 tabrightmenu - layui 第三方组件平台</title> 
  <meta name="renderer" content="webkit"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
  <meta name="description" content="（第一次发布考虑欠周，修正之后发布...）
为Tab选项卡增加右键弹出菜单，例如：关闭当前、关闭其它....
- 支持页面多个Tab选项卡弹出菜单单独定义
- 支持自定义弹出项和弹出事件（使用registMethod属性进行注册）
- 支持自定义图标（目前仅支持LayUI默认图标）
"> 
  <link rel="stylesheet" href="/t/font_24081_60slu02pimt.css">
  <link rel="stylesheet" href="/layui/dist/css/layui.css">
  <link rel="stylesheet" href="/static/css/fly/global.css" charset="utf-8">
  <link rel="stylesheet" href="/static/css/global.css" charset="utf-8">
  <link rel="stylesheet" href="/static/css/global.css" charset="utf-8">
 </head>
 <body>
  <div class="layui-header header header-extends" style="background-color: #24262F;"> 
   <div class="layui-container"> <a class="logo" href="/"> <img src="/static/images/layui/logo.png" alt="layui"> </a>
    <div class="layui-form component" lay-filter="LAY-site-header-component"></div> 
    <ul class="layui-nav"> 
     <li class="layui-nav-item layui-hide-xs"> <a href="/">框架</a> </li>
     <li class="layui-nav-item layui-hide-xs layui-this"> <a href="/extend/index.html">扩展</a> </li> 
     <li class="layui-nav-item"> <a href="javascript:;">周边</a> 
      <dl class="layui-nav-child layui-nav-child-c"> 
       <dd lay-unselect> <a href="/alone.html" target="_blank">独立组件</a>
       </dd> 
       <dd class="layui-hide-sm layui-show-xs" lay-unselect> <a href="/extend/index.html">扩展组件</a> 
        <hr> 
       </dd> 
      </dl> </li> 
    </ul> 
   </div>
  </div><!--[if lt IE 9]>  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script><![endif]--> 
  <div class="fly-extend-banner fly-extend-banner-sm"> 
   <div class="layui-carousel" id="FLY-extend-banner" data-height="200px"> 
    <div carousel-item> 
     <div style="background-image: url(/upload/2018_8/168_1535373858670_8825.jpg)">
      <div style="background: rgba(0,0,0,.6)"></div> 
     </div> 
    </div> 
   </div> 
   <h1 class="fly-extend-banner-title">layui 第三方组件平台</h1> 
   <div class="fly-extend-banner-release"> <a href="/extend/index.html" class="layui-btn layui-btn-lg">返回首页</a>
   </div> 
  </div>
  <div class="fly-extend-detail layui-card"> 
   <div class="layui-container"> 
    <div class="fly-extend-list-header"> 
     <h1 class="fly-extend-title layui-elip"> <a>Tab选项卡右键弹出菜单组件</a> <span class="layui-badge layui-bg-green layui-hide-xs">tabrightmenu</span> </h1> 
     <div class="fly-extend-list-info"> <a href="/u/12229896/index.html" target="_blank" class="fly-extend-list-user" title="发布者"> <cite class="layui-hide-xs">Ta**F</cite> <img src="/images/fly/avatar/7.jpg" alt="Ta**F"> </a> 
     </div> 
    </div> 
    <blockquote class="fly-extend-list-desc layui-elem-quote"> 
     <p>（第一次发布考虑欠周，修正之后发布...） 为Tab选项卡增加右键弹出菜单，例如：关闭当前、关闭其它.... - 支持页面多个Tab选项卡弹出菜单单独定义 - 支持自定义弹出项和弹出事件（使用registMethod属性进行注册） - 支持自定义图标（目前仅支持LayUI默认图标） </p> 
    </blockquote> 
    <div class="fly-extend-list-bottom"> <span class="layui-inline">创建：2018-10-12 </span> 
     <div class="layui-btn-container layui-extend-doc-edit"> 
     </div> 
    </div> 
   </div>
  </div>
  <div class="layui-container"> 
   <div class="layui-row layui-col-space20"> 
    <div class="layui-col-sm3 layui-col-md2"> 
     <div class="layui-card"> 
      <ul class="fly-extend-doc-nav" lay-filter="extend-doc-nav"> 
       <li class="layui-this" lay-id="doc"> <a href="javascript:;"><i class="iconfont icon-wendang"></i> 文档</a> </li> 
       <li lay-id="download"> <a href="javascript:;"><i class="iconfont icon-xiazai"></i> 下载</a> </li> 
       <li lay-id=""> <a href="https://tanghanf.github.io/layui_plugin/rightmenu_demo.html" rel="nofollow" target="_blank"> <i class="iconfont icon-kaifashili"></i> 来源 </a> </li> 
      </ul> 
     </div> 
    </div> 
    <div class="layui-col-sm9 layui-col-md10"> 
     <div class="layui-card fly-extend-doc layui-show"> 
      <div class="layui-card-header"> 
       <h3 class="layui-inline layui-this">文档</h3> 
      </div> 
      <div class="layui-card-body detail-body photos layui-text">
        功能支持
       <br>
       <div class="layui-elem-quote">
         支持页面多个Tab选项卡弹出菜单单独定义
        <br>支持自定义弹出项和弹出事件（使用registMethod属性进行注册）
        <br>支持自定义图标（目前仅支持LayUI默认图标）
       </div>效果图
       <br>
       <img src="https://ws2.sinaimg.cn/large/006tNbRwly1fw565a2ledj311o0i00un.jpg"> 
       <br>
       <br>
       <hr>
       <img src="https://ws1.sinaimg.cn/large/006tNbRwly1fw568pduerj30zo0mgwgf.jpg"> 
       <br>
       <br>调用说明
       <br>
       <div class="layui-elem-quote">
         一个页面一个Tab选项卡情况
       </div>html部分
       <br>Tab选项卡使用官方提供模板： <a href="/doc/element/tab.html" target="_blank">/doc/element/tab.html</a> 然后简单修改如下：
       <br>
       <pre>&lt;div id="nav1"&gt;<br>    &lt;!-- 顶部切换卡 --&gt;<br>    &lt;!--ul的id要和lay-filter一致--&gt;<br>    &lt;div class="layui-tab" lay-filter="main_tab1"&gt;<br>        &lt;ul id="main_tab1" class="layui-tab-title"&gt;<br>            &lt;li lay-id="0" class="layui-this"&gt;网站设置&lt;/li&gt;<br>            &lt;li lay-id="1"&gt;用户管理&lt;/li&gt;<br>            &lt;li lay-id="2"&gt;权限分配&lt;/li&gt;<br>            &lt;li lay-id="3"&gt;商品管理&lt;/li&gt;<br>            &lt;li lay-id="4"&gt;订单管理&lt;/li&gt;<br>        &lt;/ul&gt;<br>        &lt;div class="layui-tab-content"&gt;<br>            &lt;div class="layui-tab-item layui-show"&gt;这是 网站设置 内容&lt;/div&gt;<br>            &lt;div class="layui-tab-item"&gt;这是 用户管理 内容&lt;/div&gt;<br>            &lt;div class="layui-tab-item"&gt;这是 权限分配 内容&lt;/div&gt;<br>            &lt;div class="layui-tab-item"&gt;这是 商品管理 内容&lt;/div&gt;<br>            &lt;div class="layui-tab-item"&gt;这是 订单管理 内容&lt;/div&gt;<br>        &lt;/div&gt;<br>    &lt;/div&gt;<br>&lt;/div&gt;</pre>注意：
       <br>
       <div class="layui-elem-quote">
        &gt; 需要在class="layui-tab"的div外层包裹一层div并指定该div的id，该id也是组件“container”的属性值
        <br>ul的“id”要和父div的“lay-filter”一致
        <br>&gt; ”lay-filter“属性即组件的”filter“属性
        <br>&gt; 为各个选项卡菜单项（li元素）加入“lay-id”属性进行唯一标识。
        <br>&gt; 其它内容自行处理即可！
       </div> 
       <br>JavaScript部分
       <br>
       <br>默认渲染
       <br>
       <pre>layui.config({<br>    base: 'module/',<br>}).use(['element', 'tabrightmenu'], function () {<br>    let element = layui.element;<br>    let rightmenu_ = layui.tabrightmenu;<br><br>    // 默认方式渲染全部：关闭当前（closethis）、关闭所有（closeall）、关闭其它（closeothers）、关闭左侧所有（closeleft）、关闭右侧所有（closeright）、刷新当前页（refresh）<br>    rightmenu_.render({<br>        container: '#nav1',<br>        filter: 'main_tab1',<br>    });<br>});</pre> 
       <br>自定义渲染项
       <br>
       <pre>layui.config({<br>    base: 'module/',<br>}).use(['element', 'tabrightmenu'], function () {<br>    let element = layui.element;<br>    let rightmenu_ = layui. tabrightmenu;<br><br>    // 默认方式渲染全部：关闭当前（closethis）、关闭所有（closeall）、关闭其它（closeothers）、关闭左侧所有（closeleft）、关闭右侧所有（closeright）、刷新当前页（refresh）<br>    rightmenu_.render({<br>        container: '#nav1',<br>        filter: 'main_tab1',<br>        navArr: [<br>            {eventName: 'closethis', title: '关闭当前', icon: 'layui-icon-close'},<br>            {eventName: 'closeall', title: '关闭所有'},<br>            {eventName: 'closeothers', title: '关闭其它'},<br>            //自定义菜单项，此时dataType属性表示自定义事件<br>            {title: "测试", eventName: 'test'},<br>            {title: "测试2", eventName: 'test2'},<br>        ],<br>        //注册自定义事件<br>        registMethod: {'test': testMethod, 'test2': test2Method}<br>    });<br>    <br>    <br>    <br>    function testMethod(id, title, currentNavGroup, dom) {<br>            changeCurrentTabContent(currentNavGroup, "[测试]触发,触发的ID：" + id + "，标题：" + title);<br>        }<br><br>    function test2Method(id, title, currentNavGroup, dom) {<br>            changeCurrentTabContent(currentNavGroup, "[测试2]触发,触发的ID：" + id + "，标题：" + title);<br>        }<br><br>    function changeCurrentTabContent(currentNavGroup, content) {<br>            $(currentNavGroup + " div[class='layui-tab-item layui-show']").html(content);<br><br>        }<br>});</pre>使用自定义弹出项最重要的就是navArr属性。该属性是一个对象集合，每一个对象描述了菜单项的一些基本信息（eventName：事件类型、title：菜单项标题、icon：图标class类名）
       <br>
       <br>使用自定义弹出项需要定义registMethod属性，以便对eventName属性指定的事件进行注册
       <br>一个页面一个Tab选项卡情况
       <br>
       <br>该情景与上述定义、调用差不多，唯一需要注意的就是HTML部分。
       <br> 
       <br>
       <pre>&lt;h1&gt;选项卡1&lt;/h1&gt;<br>&lt;div id="nav1"&gt;<br>    &lt;!-- 顶部切换卡 --&gt;<br>    &lt;!--ul的id要和lay-filter一致--&gt;<br>    &lt;div class="layui-tab" lay-filter="main_tab1"&gt;<br>        &lt;ul id="main_tab1" class="layui-tab-title"&gt;<br>            &lt;li lay-id="0" class="layui-this"&gt;网站设置&lt;/li&gt;<br>            &lt;li lay-id="1"&gt;用户管理&lt;/li&gt;<br>            &lt;li lay-id="2"&gt;权限分配&lt;/li&gt;<br>            &lt;li lay-id="3"&gt;商品管理&lt;/li&gt;<br>            &lt;li lay-id="4"&gt;订单管理&lt;/li&gt;<br>        &lt;/ul&gt;<br>        &lt;div class="layui-tab-content"&gt;<br>            &lt;div class="layui-tab-item layui-show"&gt;这是 网站设置 内容&lt;/div&gt;<br>            &lt;div class="layui-tab-item"&gt;这是 用户管理 内容&lt;/div&gt;<br>            &lt;div class="layui-tab-item"&gt;这是 权限分配 内容&lt;/div&gt;<br>            &lt;div class="layui-tab-item"&gt;这是 商品管理 内容&lt;/div&gt;<br>            &lt;div class="layui-tab-item"&gt;这是 订单管理 内容&lt;/div&gt;<br>        &lt;/div&gt;<br>    &lt;/div&gt;<br>&lt;/div&gt;<br><br>&lt;h1&gt;选项卡2&lt;/h1&gt;<br>&lt;div id="nav2"&gt;<br>    &lt;!-- 顶部切换卡 --&gt;<br>    &lt;div class="layui-tab" lay-filter="main_tab2"&gt;<br>        &lt;ul id="main_tab2" class="layui-tab-title"&gt;<br>            &lt;li lay-id="11" class="layui-this"&gt;权限管理&lt;/li&gt;<br>            &lt;li lay-id="12"&gt;机构管理&lt;/li&gt;<br>            &lt;li lay-id="21"&gt;字典管理&lt;/li&gt;<br>            &lt;li lay-id="31"&gt;用户管理&lt;/li&gt;<br>            &lt;li lay-id="41"&gt;物流管理&lt;/li&gt;<br>        &lt;/ul&gt;<br>        &lt;div class="layui-tab-content"&gt;<br>            &lt;div class="layui-tab-item layui-show"&gt;这是 权限管理 内容&lt;/div&gt;<br>            &lt;div class="layui-tab-item"&gt;这是 机构管理 内容&lt;/div&gt;<br>            &lt;div class="layui-tab-item"&gt;这是 字典管理 内容&lt;/div&gt;<br>            &lt;div class="layui-tab-item"&gt;这是 用户管理 内容&lt;/div&gt;<br>            &lt;div class="layui-tab-item"&gt;这是 物流管理 内容&lt;/div&gt;<br>        &lt;/div&gt;<br>    &lt;/div&gt;<br>&lt;/div&gt;</pre>
       <div class="layui-elem-quote">
         注意，我们定义了两个div，id分别为”nav1“、”nav2“。假如我们现在实现id为”nav1“的Tab选项卡弹出默认菜单项，id为”nav2“的Tab选项卡弹出一些自定义菜单项，JavaScript代码如下：
       </div>
       <pre>layui.config({<br>    base: 'module/',<br>}).use(['tabrightmenu'], function () {<br>    let element = layui.element;<br>    let rightmenu_ = layui.tabrightmenu;<br><br>    // 默认方式渲染全部：关闭当前（closethis）、关闭所有（closeall）、关闭其它（closeothers）、关闭左侧所有（closeleft）、关闭右侧所有（closeright）、刷新当前页（refresh）<br>    // 渲染nav1<br>    rightmenu_.render({<br>        container: '#nav1',<br>        filter: 'main_tab1',<br>    });<br><br>    // 渲染nav2，渲染默认部分弹出项+自定义弹出项<br>    rightmenu_.render({<br>        container: '#nav2',<br>        filter: 'main_tab2',<br>        // navArr：对象数组，每个对象包含dataType、title、method属性<br>        navArr: [<br>            {eventName: 'closethis', title: '关闭当前', icon: 'layui-icon-close'},<br>            {eventName: 'closeall', title: '关闭所有'},<br>            {eventName: 'closeothers', title: '关闭其它'},<br>            //自定义菜单项，此时dataType属性表示自定义事件<br>            {title: "测试", eventName: 'test'},<br>            {title: "测试2", eventName: 'test2'},<br>        ],<br>        // 注册自定义事件<br>        registMethod: {'test': testMethod, 'test2': test2Method}<br>    })<br><br>    function testMethod(id, title, currentNavGroup, dom) {<br>        changeCurrentTabContent(currentNavGroup, "[测试]触发,触发的ID：" + id + "，标题：" + title);<br>    }<br><br>    function test2Method(id, title, currentNavGroup, dom) {<br>        changeCurrentTabContent(currentNavGroup, "[测试2]触发,触发的ID：" + id + "，标题：" + title);<br>    }<br><br>    function changeCurrentTabContent(currentNavGroup, content) {<br>        $(currentNavGroup + " div[class='layui-tab-item layui-show']").html(content);<br><br>    }<br>});</pre>以上就可以实现一个页面多个选项卡进行不同处理，实用性更强。
       <br>
       <br>具体使用说明参考 <a href="https://github.com/TangHanF/layui_plugin/blob/master/README.md" target="_blank" rel="nofollow">https://github.com/TangHanF/layui_plugin/blob/master/README.md</a> 说明 
      </div> 
     </div> 
     <div class="layui-card fly-extend-doc"> 
      <div class="layui-card-header"> 
       <h3 class="layui-inline layui-this">下载</h3> 
      </div> 
      <div class="layui-card-body detail-body layui-text"> 
       <div class="layui-btn-container"> <a href="//cdn.layui.com/extend/12229896_1539309810648_61596.zip" target="_blank" class="layui-btn layui-btn-lg layui-btn-primary"> 立即下载 </a> <a href="https://github.com/TangHanF/layui_plugin" target="_blank" class="layui-btn layui-btn-lg layui-btn-primary layui-border-black"> 去 GitHub 下载 </a> 
        <blockquote class="layui-elem-quote">
          该扩展组件由第三方用户主动投递，并由其自身进行维护，本站仅做收集。 
        </blockquote> 
       </div> 
      </div> 
     </div> 
    </div> 
   </div>
  </div>
  <div class="fly-footer"> 
   <p>Copyright © 2021 <a href="/index.html">layui.itmtr.cn</a> MIT Licensed</p>
  </div>
  <script src="/layui/dist/layui.js"></script>
  <script>// common</script>

 </body>
<script src="/common/common.js"></script>
</html>